<template>
	<div>
		<!-- 头部 -->
		<div class="heard-body">
			<div class="heard-left">
				<el-button type="success" size="small" plain>新增</el-button>
				<el-button type="danger" size="small" plain>批量删除</el-button>
				<el-button type="warning" size="small" plain>导出</el-button>
			</div>

			<div class="heard-right">
				<el-input style="margin-right: 10px" placeholder="请输入搜索内容" v-model="keyWords" size="small" clearable></el-input>
				<el-button type="primary" size="small" plain icon="el-icon-search"></el-button>
			</div>
		</div>
		<!-- 主体区域 -->
		<el-card shadow="hover" v-show="flag">
			<el-table :data="tableData" stripe style="width: 100%" class="motion-table1">
				<el-table-column prop="debateTopicTitle" :label="$t('message.table.title1')" width="400"> </el-table-column>
				<el-table-column prop="debateTopicClassification" :label="$t('message.table.title9')"> </el-table-column>
				<el-table-column prop="name" :label="$t('message.table.title3')"> </el-table-column>
				<el-table-column prop="debateTopicAddtime" :label="$t('message.table.title4')"> </el-table-column>
				<el-table-column fixed="right" :label="$t('message.table.title5')" width="180">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">{{ $t('message.table.title6') }}</el-button>
						<el-button type="text" size="small">{{ $t('message.table.title7') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageInfo.pagenum"
					:page-sizes="[4, 6, 8, 10]"
					:page-size="pageInfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'competitionSystemManagement',
	data() {
		return {
			flag: true,
			keyWords: '',
			tableData: [],
			pageInfo: {
				pagenum: 1,
				pagesize: 4,
			},
			total: 0,
		};
	},
	methods: {
		handleSizeChange(val) {
			console.log(val);
		},
		handleCurrentChange(val) {
			console.log(val);
		},
		handleClick(row) {
			console.log(row);
		},
	},
};
</script>

<style scoped lang="scss">
.heard-body {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}
.heard-right {
	display: flex;
	margin-left: 15px;
	align-items: center;
}
.page {
	margin-top: 10px;
}
.motion-table1 {
	opacity: 0;
	animation-name: error-num;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: calc(1 / 10) + s;
}
</style>
